<!DOCTYPE html>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>1-2 键盘控制div移动</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background-color: rgba(0,0,0,0.5);
		}
		.hezi{
			width: 100px;
			height: 100px;
			background-color: #ccc;
			position: absolute;
		}
	</style>
	<script type="text/javascript">
		//解决键盘控制div移动卡顿现象,定义4个方向，为
		var direction={keyLeft:false,keyRight:false,keyTop:false,keyBottom:false};
		var timer=0;
		//定义一个函数，对应每个方向，左就向左移动
		function move(){
			var aDiv=document.querySelector('.hezi');
			if (direction.keyLeft) {
				aDiv.style.left=aDiv.offsetLeft-10+'px';
			}else if(direction.keyRight){
				aDiv.style.left=aDiv.offsetLeft+10+'px';
			}else if(direction.keyTop){
				aDiv.style.top=aDiv.offsetTop-10+'px';
			}else if(direction.keyBottom){
				aDiv.style.top=aDiv.offsetTop+10+'px';
			}
		};
		//开启一个定时器
		timer=setInterval(move,30);
		//键盘的上下左右落下时，让各个方向的布尔值变为true，就开始移动
		document.onkeydown=function(){
			if (event.keyCode == 37) {
				direction.keyLeft=true;
			}else if (event.keyCode == 39) {
				direction.keyRight=true;
			}else if (event.keyCode == 38) {
				direction.keyTop=true;
			}else if (event.keyCode == 40) {
				direction.keyBottom=true;
			}
		};
		//当上下左右按键弹起后，让各个方向的布尔值变成false，停止移动
		document.onkeyup=function(){
			direction.keyLeft=false;
			direction.keyRight=false;
			direction.keyTop=false;
			direction.keyBottom=false;
		};
		//未解决问题，还是无法完全流畅的让div上下左右移动，还在思考解决办法
	</script>
</head>
<body>
	<div class="hezi"></div>
</body>
</html>